<template>
  <div class="user_posts">
    <div class="post_box">
      <div class="posts_item" v-for="(item,index) in articles" :key="index">
        <div class="header">
          <!-- 头像 昵称 发布时间 -->
          <router-link :to="{path:'/user/'+item.userInfo.uid}" target="_blank">
            <div class="avatar">
              <img :src="item.userInfo.userAvatar" alt />
            </div>
            <div class="username">{{item.userInfo.username}}</div>
          </router-link>

          <div class="post_time">{{item.articlePostTime | timeAgo}}</div>
        </div>
        <router-link :to="{path:'/post/'+item.articleId}" target="_blank">
          <div class="screenshot" v-if="item.screenShot" v-lazy:background-image="item.screenShot"></div>
          <div class="title">{{item.title}}</div>
          <div class="summary large" :class="{'small':item.screenShot}">{{item.articleSummaryInfo}}</div>

          <!-- 文章操作 -->
          <div class="article_option">
            <ul class="option_wrapper">
              <!-- actived激活类 -->
              <li
                class="likes"
                :class=" {actived:!!item.islike}"
                @click.prevent="changeIsLike(item.islike,item.articleId,index)"
              >
                <i class="iconfont icon-like-active-"></i>
                <span>{{item.articleLikes}}</span>
              </li>
              <li class="comments">
                <i class="iconfont icon-pinglun"></i>
                <span>{{item.articleComments}}</span>
              </li>
            </ul>
          </div>
        </router-link>
      </div>
    </div>
    <NoMore v-if="isEnd && this.articles.length == 0" />
  </div>
</template>

<script>
import NoMore from "@/components/NoMore.vue";
export default {
  name: "UserPosts",
  components: {
    NoMore
  },
  data() {
    return {
      peopleid: this.$route.params.uid,
      size: 5,
      currentsize: 0,
      articles: [],
      // 没有数据了
      isEnd: false,
      loading: false //节流
    };
  },
  watch: {
    $route(val) {
      this.peopleid = val.params.uid;
    },
    peopleid(val) {
      this.$set(this, "articles", []);
      this.getUserPosts(true, this.peopleid, this.size, this.currentsize);
    }
  },

  methods: {
    //   分页获取用户文章
    getUserPosts(isclear, peopleid, size, currentsize) {
      if (!this.loading) {
        this.loading = true;

        let myid = this.$store.state.user.uid;
        const get = this.$axios
          .get("/getArticlesByPage", {
            params: {
              myid: myid,
              peopleid: peopleid,
              size: size,
              currentsize: currentsize
            }
          })
          .then(res => {
            this.loading = false;
            if (res.data.code == "0" && res.data.data) {
              if (!isclear) {
                // 请求成功 有数据
                this.articles = this.articles.concat(res.data.data);
                this.currentsize += res.data.data.length;
              } else {
                // 请求成功 有数据
                this.articles = res.data.data;
                this.currentsize = res.data.data.length;
              }
              if (res.data.data.length < size) {
                // 请求成功 没有数据
                this.isEnd = true;
              }
            } else {
              // 请求失败
              this.$Message.error({
                background: true,
                content: err.response.data.msg,
                duration: 2.5
              });
            }
          })
          .catch(err => {
            console.log(err.response);
          });
      } else {
        console.log("太快啦");
        return;
      }
    },

    //鼠标滚动异步请求数据
    scroll() {
      // let loading = false;
      window.onscroll = () => {
        // 距离底部200px时加载一次
        let bottomOfWindow =
          document.documentElement.offsetHeight -
            document.documentElement.scrollTop -
            window.innerHeight <=
          100;
        if (bottomOfWindow && this.loading == false) {
          this.loading = true;
          if (!this.isEnd) {
            this.loading = false;
            this.getUserPosts(
              false,
              this.peopleid,
              this.size,
              this.currentsize
            );
          } else {
            this.loading = false;
          }
        }
      };
    },

    // 点赞或取消点赞
    changeIsLike(islike, articleid, index) {
      if (!this.loading) {
        //点赞或取消点赞前先判断用户是否登录
        let isLogin = this.$store.state.isAuthenticated;
        let uid = this.$store.state.user.uid;
        // 若未登录则要求登录
        if (isLogin) {
          let action;
          if (!!islike) {
            action = "/unlike";
          } else {
            action = "/like";
          }

          this.$axios
            .get(action, {
              params: {
                uid: uid,
                articleid: articleid
              }
            })
            .then(res => {
              // 取消点赞图标激活类
              this.articles[index].islike = !this.articles[index].islike;
              // 点赞数+1/-1
              console.log(islike);
              if (!islike) {
                this.articles[index].articleLikes =
                  this.articles[index].articleLikes + 1;
              } else {
                this.articles[index].articleLikes =
                  this.articles[index].articleLikes - 1;
              }
              this.loading = false;
            })
            .catch(err => {
              this.$Message.error({
                background: true,
                content: "操作失败",
                duration: 2.5
              });
            });
        } else {
          // 弹出登录框
          this.$store.dispatch("setIsToLogin", true);
        }
      } else {
        console.log("等一下嘛");
        return;
      }
    }
  },
  mounted() {
    this.scroll();
    this.getUserPosts(
      true,
      this.$route.params.uid,
      this.size,
      this.currentsize
    );
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>

<style lang='scss'>
.user_posts {
  .post_box {
    .posts_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 1.5rem;
      border-bottom: 1px solid #dddddd;
      .header {
        height: 3rem;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        a {
          display: flex;
          align-items: center;
          color: #8b8b8b;
          .avatar {
            margin-right: 1rem;
            display: flex;
            align-items: center;
            img {
              width: 2.5rem;
              height: 2.5rem;
            }
          }
          .username {
            margin-right: 1rem;
            font-size: 1rem;
          }
        }

        .post_time {
          color: #8b8b8b;
          font-size: 0.9rem;
        }
      }
      //   文章操作
      .article_option {
        margin-top: 10px;
        .option_wrapper {
          display: inline-block;
          border: 0.5px solid #e3e3e3;
          .actived {
            color: #19be6b;
          }
          li {
            float: left;
            padding: 0 10px;
            color: #909090;
            height: 30px;
            line-height: 30px;
            i {
              font-size: 15px;
            }
            span {
              font-size: 0.9rem;
              font-weight: 700;
              padding-left: 5px;
            }
          }
          li:nth-child(1) {
            border-right: 0.5px solid #e3e3e3;
          }
        }
      }

      .screenshot {
        height: 10rem;
        display: flex;
        border-radius: 4px;
        background-color: #eee;
        margin-bottom: 1rem;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover;
      }
      .title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #000;
      }
      .summary {
        color: #8b8b8b;
        line-height: 1.3;
        font-size: 1rem;
      }
      .large {
        max-height: 5rem;
        overflow: hidden;
      }
      .small {
        max-height: 2.5rem;
        overflow: hidden;
      }
    }
  }
}
</style>